"use client"

import { useState } from "react"
import { ChevronDown } from "lucide-react"
import Emoji from "@/components/Emoji"

interface FAQItem {
  question: string
  answer: string
}

const faqs: FAQItem[] = [
  {
    question: "What is Beraroot?",
    answer: "Beraroot is a foundational infrastructure layer built on Berachain that combines Miner Extractable Value (MEV) optimization and advanced Data Availability (DA) technology. It enhances security, transparency, and transaction throughput across Berachain and its Layer 2 platforms."
  },
  {
    question: "What is the purpose of the $BlueBera token?",
    answer: "$BlueBera is the native staking and utility token of the Beraroot ecosystem. It is used for validator staking, DA service payments, protocol incentives, and will also be integrated into liquidity and reward flows throughout the ecosystem."
  },
  {
    question: "How does Beraroot's Flywheel Effect Model work?",
    answer: "The Flywheel Effect starts with validators staking $BlueBera to secure the network. This triggers restaking on Berachain, enabling users to earn $stBLUEBERA by contributing BGT. These tokens can be used in BEX pools for yield or routed back to validators, fueling ongoing demand and compounding returns."
  },
  {
    question: "What is $stBLUEBERA and how do users obtain it?",
    answer: "$stBLUEBERA is a restaked version of $BlueBera on Berachain. Users earn $stBLUEBERA by delegating BGT to Beraroot validators, who then distribute rewards based on staking performance and protocol activity."
  },
  {
    question: "How does Beraroot improve MEV fairness?",
    answer: "Beraroot uses fair MEV optimization to reduce transaction ordering manipulation. With open RPC auctions and algorithmic controls, it levels the playing field, making trade execution more transparent and equitable."
  },
  {
    question: "What role does the Beraroot DA Layer play in the ecosystem?",
    answer: "The DA layer ensures permanent, verifiable, and tamper-proof storage of transaction data. This is crucial for both Berachain and its Layer 2 ecosystems, supporting scalable, secure applications while improving censorship resistance."
  },
  {
    question: "How are Layer 2 projects integrated into Beraroot?",
    answer: "Layer 2 projects using Beraroot’s DA solution must pay for data availability services in $BlueBera. This creates recurring demand for $BlueBera while securing and scaling their operations with Beraroot’s infrastructure."
  },
  {
    question: "Will there be a $BlueBera airdrop?",
    answer: "Yes. A portion of $BlueBera tokens will be airdropped to holders of BlueBera NFTs. Airdrop allocation will depend on the duration and quantity of NFT holdings, incentivizing long-term engagement and participation."
  },
  {
    question: "How can I obtain $BlueBera or $stBLUEBERA?",
    answer:  `
      You can acquire $BlueBera or $stBLUEBERA in multiple ways:<br/>
      Purchase through <b>Launchpad pre-sales</b><br/>
      Trade via <b>CEX</b> or <b>DEX</b> listings<br/>
      Receive NFT-based airdrops<br/>
      Participate in staking and restaking mechanisms<br/>
      Provide liquidity for the $stBLUEBERA/$Honey pair on BEX
    `
  },
  {
    question: "What makes Beraroot different from other DA or MEV solutions?",
    answer: "Beraroot is one of the few platforms combining DA scalability, tamper-proof storage, and fair MEV mechanisms. Its reward flywheel tightly integrates with Berachain’s core protocol, offering unique incentives across staking, trading, and governance."
  },
  {
    question: "What is the future utility of $BlueBera beyond staking?",
    answer: `
      In addition to staking, $BlueBera can be used to:<br/>
      Pay DA service fees<br/>
      Participate in ecosystem governance<br/>
      Receive airdrops from Layer 2 projects<br/>
      Provide liquidity for yield farming<br/>
      <b>Share in profit distributions from Beraroot-integrated projects</b>
    `
  },
  {
    question: "How does governance work in Beraroot?",
    answer: "Governance is community-driven via BGT and BERO tokens. Holders vote on proposals, treasury usage, and validator reward allocation, ensuring decentralization and adaptability over time."
  },
  {
    question: "What’s the relationship between BGT, $BlueBera, and Validators?",
    answer: "BGT holders delegate to Validators to influence block production and reward distribution. Validators use $BlueBera for restaking and securing Beraroot, linking governance and infrastructure in a continuous feedback loop."
  },
  {
    question: "Where can I learn more or get involved?",
    answer: `To join the ecosystem, visit <a href="https://www.beraroot.com" style="color: #2563eb;" target="_blank">www.beraroot.com</a> or follow updates via <a href="https://twitter.com/beraroot" style="color: #2563eb;" target="_blank">@Beraroot</a> on X. Stay tuned for upcoming airdrop snapshots, staking opportunities, and community governance participation.`
  },
  {
    question: "What can I get from the Beraroot community?",
    answer: `
      The Beraroot community is your go-to place for real-time support, project updates, technical discussions, and early access to campaigns like airdrops, staking events, and launch announcements.<br/>
      You can:<br/>
      Ask questions and get help from the core team and other users<br/>
      Stay up to date on new features, token info, and roadmap updates<br/>
      Join exclusive events, giveaways, and AMAs<br/>
      <span style="display: inline-flex; align-items: center;"><img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f517.svg" alt="🔗" style="width: 16px; height: 16px; margin-right: 4px;" /> Join our official community on Discord:</span> <a href="https://discord.gg/beraroot" style="color: #2563eb;" target="_blank">discord.gg/beraroot</a>
    `
  },
]

export default function FAQsPage() {
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index)
  }

  return (
    <main className="flex-1">
      <div className="mx-auto max-w-7xl px-6 py-16">
        <div className="relative mt-24 mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">FAQs</h1>
          <p className="text-lg text-gray-400">Answers to the most frequently asked questions.</p>
          <div 
            className="absolute -top-8 right-0 w-[300px] h-[300px] opacity-60 rounded-sm"
            style={{
              backgroundImage: "url('/images/faq-illustration.jpg')",
              backgroundSize: 'contain',
              backgroundPosition: 'top right',
              backgroundRepeat: 'no-repeat'
            }}
          />
        </div>

        <div className="space-y-4">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="border border-bera-blue/20 rounded-lg overflow-hidden bg-dark-blue/50 backdrop-blur-sm"
            >
              <button
                className="w-full px-6 py-4 text-left flex justify-between items-center"
                onClick={() => toggleFAQ(index)}
              >
                <span className="text-white text-xl font-semibold">{index + 1}. {faq.question}</span>
                <ChevronDown 
                  className={`w-4 h-4 text-gray-400 transform transition-transform duration-200 ${
                    openIndex === index ? 'rotate-180' : ''
                  }`}
                />
              </button>
              <div
                className={`px-6 transition-all duration-200 ease-in-out overflow-hidden ${
                  openIndex === index ? 'max-h-96 pb-4' : 'max-h-0'
                }`}
              >
                <p className="text-gray-400 leading-relaxed pl-6" dangerouslySetInnerHTML={{ __html: faq.answer }}></p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </main>
  )
} 